<link rel="stylesheet" href="__PUBLIC__/3rd/upload/css/diyUpload.css">
<link rel="stylesheet" href="__PUBLIC__/3rd/upload/css/webuploader.css">
<include file="Public:artDialog" />
	<script src="__PUBLIC__/3rd/jquery/jquery.min.js"></script>
<style>
*{ margin:0; padding:0;}
#box_img{ margin:50px auto; width:540px; min-height:400px; }
.page_head{
	padding: 24px;
}
.edit_img{
	width: 20px;
	height:20px;
}
.sel_img_box{
	position: absolute;
	right:32px;
	top:16px;
    display: block;
    z-index: 10;
    border: 3px solid #000;
    border-radius: 3px;
    width: 23px;
    height: 23px;
}
.sel_img_box input{
	margin:-1px;
}
.img_box{
	position: relative;
}
.img_box label{
	cursor: pointer;
}
.thumbnail{
	padding: 6px
}
.thumbnail img{
	width:100%;
	max-width: 260px;
	height:100%;
}
.opacity_6{
	/*opacity: 0.6;*/
    filter: contrast(50%);
}

</style>
<div class="col-xs-12 page_head" >
	<button class="btn btn-info" onclick="fnadd()" >添加图片 </button>
</div>
<div class="col-xs-12" >
		<!-- 	<div class="content_head">
				<p class="head_text"><b>最近图片</b></p>
			</div> -->
			<div class="col-xs-12" style="    position: fixed;
    float: none;
    top: 51px;
    opacity: 1;
    z-index: 99;
    background-color: powderblue;
    left: 244px;">
					<div class="row">
						<button type="button" class="btn btn-success" id="editImgButton" style="margin-left: 15px;">
						  <span class="glyphicon glyphicon-pencil"> </span> <span class="text">编辑</span>
						</button>
						<button class="btn btn-default hide" id="delImgButton">
							<span class="glyphicon glyphicon glyphicon-trash"> </span>删除
						</button>
						<button class="btn btn-default hide" id="checkImgAll">
							<span class="glyphicon glyphicon-ok"></span><span class="text">全选</span>
						</button>
					</div>
					<!-- <div class="" id="pagerBar">
					    <div class="col-xs-6" style="vertical-align: middle; text-align: right;">
					        <span id="sp_grid_pager_records" class="" style="font-size: 13px;color:#000">共 0 页，第 0 页</span>
					        <span class="dataTables_paginate paging_bootstrap " style="display: inline-block;vertical-align: middle;margin-right: 6px">
					                <ul class="pagination" style="margin-right: 10px; margin-left: 20px; cursor: pointer">
					                    <li id="first_grid-pager" class="prev "><a onclick="img_manage.ToPage('first')"><span class="glyphicon glyphicon-backward"></span>
					                    </i></a></li>
					                    <li id="prev_grid-pager" class="prev "><a style="border-right: none" onclick="img_manage.ToPage('prev')"><span class="glyphicon glyphicon-chevron-left"></span>
					                    </i></a></li>
					                    <li style="float:left"><input type="text" value="1" id="selPageNum" style="width:40px;height:34px;text-align:center;margin-right:1px;border:1px solid #ddd"></li>
					                    <li><a onclick="img_manage.ToPage('num')" style="border-left: none">跳转</a></li>
					                    <li id="next_grid-pager" class="next "><a onclick="img_manage.ToPage('next')"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
					                    <li id="last_grid-pager" class="next "><a onclick="img_manage.ToPage('last')"><span class=" glyphicon glyphicon-forward"></span></a></li>
					                </ul>
					        </span>
					    </div>
					</div>
					</div> -->
				<!-- </div> -->
			</div>
			<div class="row img_content" id="imgContainer" style="padding: 12px;">
                <div id="img_content">
                 <volist  name="list" id="i">
                 	<div class="col-xs-6 col-md-3 img_box">
					<span class="sel_img_box hide">

						<input class="edit_img"  id="{$i.id}check" disabled = "disabled" type="checkbox">

					</span>
				    <label for="{$i.id}check" href="#" class="thumbnail">
				      <img  data-src="" src="__PUBLIC__{$i.compress_url}" alt="...">
				    </label>

				   </div>

                 </volist>
                 </div>




</div>
</div>

<div id="img_upload_1" style="background: powderblue;display: none" class="img_upload" >
	<div id="box_img">
		<div id="uploadContent">
		</div>
		<div id="btnContainer" style="height:60px;position:absolute;left:32px; bottom: -6px">

		</div>
	</div>
</div>

<script src="__PUBLIC__/3rd/upload/js/diyUpload.js"></script>
<script src="__PUBLIC__/3rd/upload/js/webuploader.html5only.min.js"></script>





<script>
// dialog_loading('正在加载');
// dialog_success('成功');
// dialog_error('失败');
setTimeout(function(){
debugger;
	art.dialog.close();
},1000);
function fnadd(obj){
	   var blongtype = "";
	    var url="";
	    var title ='qwe';
	    var htm = $("#img_upload_1").html();
	    art.dialog({
	    	width:'1000px',
	    	content:document.getElementById('img_upload_1'),
	    	height:'60%',
	    	opacity: 0.7,
	    	drag:false,
	    	// padding:0,
	    	background:'#000',
	    	lock:true,
	    	init: function () {
	    		// this.lock();
	    		$('#uploadContent').diyUpload({
					url:Think.APP+'/Usercenter/upload_img',
					fileNumLimit : 50,
					fileSizeLimit : 500000 * 1024,
					fileSingleSizeLimit : 50000 * 1024,
					success:function( data ) {
						console.info( data );
					},
					error:function( err ) {
						console.info( err );
					}
				});
        		// this.content('对话框内容被扩展方法改变了');
    		},
	  	  	ok: function () {
						// window.location.href="{:U('Usercenter/usercenter',array('action'=>'usercenter'))}";
						//上传完成加载内容页面
							var url_code =localStorage.getItem("user_url");
							if(url_code != "" ){
									$(".usermenu_menu>li").each(function(index) {
			                  var type= $(this).attr('page');
												if(type == url_code){
													$(this).addClass('active');
												}
									});
								repeat_list(url_code);
							}
	  	    },
	  	    okVal:'确定',
	  });

	 }

var Think = {
			    "APP": '__APP__',
			    "URL": '__URL__',
			    "ROOT": '__ROOT__',
			    "PUBLIC": '__PUBLIC__'
			};

//保存
localStorage.setItem("user_url","{$code}");
var editFlat = false;
var checkArr = []; //选中的图片
LoadScript(Think.PUBLIC+"/home/js/img_manage.js",function(){
	setTimeout(function(){
		var page = {$page};
		 debugger;
		 // console.log(page);
		 // alert(page['count']);
		currentPage = "img_manage";
		pagenow = page.page;
		pagesize = page.pagesize;
		totalPage = page.pagecount;
		count = page.count;
		img_manage.Init(currentPage,pagenow,pagesize,totalPage,count);


	var checkFlat = true;
	$("#editImgButton").on("click",function(){
		$("#imgContainer .sel_img_box").toggleClass('hide');
		if($.trim($(this).text())==="编辑"){
			editFlat = true;

			$("#imgContainer img").addClass("opacity_6");

			$(this).find("span.text").text("取消编辑");
			$("#checkImgAll").removeClass('hide');
			$("#delImgButton").removeClass('hide');
			var objArr = $("#imgContainer .sel_img_box input[type='checkbox']");

			for(var i = 0; i<objArr.length; i++){
				objArr[i].disabled = false;
			}
		}else{
			$("#imgContainer img").removeClass("opacity_6");
			$(this).find("span.text").text("编辑");
			editFlat = false;
			$("#checkImgAll").addClass('hide');
			$("#delImgButton").addClass('hide');
			var objArr = $("#imgContainer .sel_img_box input[type='checkbox']");

			for(var i = 0; i<objArr.length; i++){
				objArr[i].disabled = true;
			}
		}

	})
	$("#checkImgAll").on("click",function(){
		debugger;
		var g = $(this);
		if($.trim(g.text())==="全选"){
			$("#imgContainer .sel_img_box input[type='checkbox']").prop("checked",true);
			$(this).find("span.text").text("取消");
			$(this).find("span.glyphicon").removeClass('glyphicon-ok');
			$(this).find("span.glyphicon").addClass('glyphicon-remove');
		}else{
			$("#imgContainer .sel_img_box input[type='checkbox']").prop("checked",false);
			$(this).find("span.text").text("全选");
			$(this).find("span.glyphicon").removeClass('glyphicon-remove');
			$(this).find("span.glyphicon").addClass('glyphicon-ok');
		}
	})
	$("#imgContainer .sel_img_box input[type='checkbox']").change(function(event) {
		debugger;
		if(editFlat === true){
			checkFlat = true;
			var objArr = $("#imgContainer .sel_img_box input[type='checkbox']");
			for(var i = 0; i<objArr.length; i++){
				if(objArr[i].checked === false){
					checkFlat = false;
					$("#checkImgAll").find("span.text").text("全选");
					$("#checkImgAll").find("span.glyphicon").removeClass('glyphicon-remove');
					$("#checkImgAll").find("span.glyphicon").addClass('glyphicon-ok');
					// return ;
					// return false
				}else{
					checkArr.push(objArr[i]);
				}
			}
			if(checkFlat === true){
				if($.trim($("#checkImgAll").text()) === "全选"){
					$("#checkImgAll").trigger("click")
				}

			}

		}else{
			event.preventDefault();
		}


	});
	$("#delImgButton").on("click",function(){
		debugger;
			var objArr = $("#imgContainer .sel_img_box input[type='checkbox']");

			for(var i = 0; i<objArr.length; i++){
				if(objArr[i].checked === true){
					checkArr.push(objArr[i]);
				}
			}
			if(checkArr.length>0){
				for(var k = 0;k<checkArr.length;k++){
					checkArr[k].closest(".img_box").remove();
				}
			}
	})

	// toggleLoadingFlash();

})


},0)

// function repeat_list(page){
// 	$.ajax({
// 		// url:"{:U(Usercenter/index,array('code'=>'userlist'))}",
// 		url:Think.APP+"/Usercenter/index",
// 		type:"post",
// 		data:{'code':page,pagesize:8},
// 		success:function(data){
// 			// $("#page-content").
// 			$("#page-content").html(data);
// 		},
// 		error:function(){
// 			console.log("网络错误")
// 			/* Act on the event */
// 		}
// 	})
//
// }
</script>


<!-- <div class="img_upload">

	<img src="__PUBLIC__/home/img/photo_1.jpg" alt="123">
	 <label>请选择一个图像文件：</label>
    <input type="file" id="file_input" multiple/>
</div> -->
